import React, {
    Component
} from 'react'
import {
    StyleSheet,
    View,
    ListView,
    Image,
    Text,
    TouchableOpacity,
    ScrollView,
    Platform
} from 'react-native'
import { MtContainer, MtChar,  MtNavBar, MtScreen } from 'martian-ui';
const { MtW1, MtW3, MtL3, MtLabel } = MtChar;
const WINDOW_WIDTH = MtScreen.width;

const WINDOW_HEIGHT = MtScreen.height;
import CircleView from '../../components/CircleView';
import { Switch } from 'react-native-switch';
import LabelBarWithSwitch from '../../components/styleCompoent/LabelBarWithSwitch';
import ChooseItems from '../../components/styleCompoent/ChooseItems';
import {fetchDeviceDetailById, controlDevice } from '../../action/girlAction';
import { bindActionCreators } from 'redux';
import {connect} from 'react-redux';
const EntityLabels = require('../../constants/entities');
import assign from 'lodash/assign';
import NavigationBar from '../../components/common/NavigationBar'

class AirSystem extends Component {
  constructor(props) {
    super(props)
    // 初始状态
    this.state = {
      value1: false,
      windSpeedModelList: [{
        id: 1,
        name: '自动',
      },{
        id: 2,
        name: '低速',
      },{
        id: 3,
        name: '中速',
      },{
        id: 4,
        name: '高速',
      }],
    }

  }

  componentWillMount() {
    const { fetchDeviceDetailById,  deviceId} = this.props;
    fetchDeviceDetailById(deviceId);
    this.convertPropsToStates(this.props);

  }
  convertPropsToStates(props) {
    const {devicesEntities, deviceId} = props;
    const device = devicesEntities[deviceId];
    if (device && device.status){
      if (device.status.switch === 'true'){
        this.setState({
          value: true,
        })
      }
      else {
        this.setState({
          value: false,
        })
      }
    }
    if (device && device.status){
      if (device.status.windSpeed){
        this.setState({
          WindSpeed: device.status.windSpeed,
        })
      }
    }

    const newState = assign({
      device
    });

    if (newState) {
      this.setState(newState);
    }
  }

  componentWillReceiveProps(nextProps) {
    this.convertPropsToStates((nextProps));
  }

  controlAir(params){
    const {controlDevice, deviceId} = this.props;
    controlDevice(params, deviceId);
  }

  render() {
    const {navigator} =this.props;
    const { windSpeedModelList, device} = this.state;
    const status = device && device.status;

    return(
      <View style={styles.container1}>
          <NavigationBar
            title={'新风系统'}
            statusBar={{backgroundColor: '#F4F4F4', barStyle: 'dark-content'}}
            navigator={navigator}
            style={{backgroundColor: '#F4F4F4'}}
          />
          <ScrollView>
            <LabelBarWithSwitch
                barWidth={WINDOW_WIDTH-30}
                barHeight={68}
                containerStyle={{marginTop: 15}}
                title="电源"
                changeValue={(value)=>{
                  this.setState({value: value},()=>{
                    const newAirParams = {'Switch': value}
                    this.controlAir(newAirParams);
                  })
                }}
                value={this.state.value}

            />
              <ChooseItems
                barWidth={WINDOW_WIDTH-30}
                barHeight={154}
                containerStyle={{marginTop: 15, marginLeft: 15}}
                title="风速选择"
                data={windSpeedModelList}

                chooseItem={ this.state.WindSpeed || '1'}
                chooseMode={(WindSpeed)=>{
                  this.setState({WindSpeed},()=>{
                    const newAirParams = {'WindSpeed': WindSpeed}
                    this.controlAir(newAirParams);
                  })
                }}
              />
          </ScrollView>

        </View>
    )
  }
}

function mapDispatchToProps(dispatch) {
  const actions = {
    fetchDeviceDetailById,
    controlDevice
  };
  return bindActionCreators(actions, dispatch);
}

function mappingStateToProps(state, ownProps) {
  const entities= state['entities'];
  const devicesEntities = entities[EntityLabels.devices];
  return {
    devicesEntities,
  }
}

module.exports = connect(mappingStateToProps, mapDispatchToProps)(AirSystem);

const styles = StyleSheet.create({
  subtitle:{
    fontWeight: 'bold',
    alignItems:'center', // 必须设置,否则换行不起作用
    paddingVertical: 40,
    paddingLeft: 20,
  },
  plusDelBtn1:{

    fontWeight: 'bold',

    alignItems: 'center',
    fontSize: 24,
    marginRight: 25,

  },
  plusDelBtn2:{
    marginLeft: WINDOW_WIDTH/2 + 10,
    fontWeight: 'bold',
    alignItems: 'center',

    fontSize: 24

  },
  container1: {
    backgroundColor: '#f4f4f4'
  },
  buttonContainer: {
    flex: 1,
    marginRight: 10,
    alignItems: 'flex-end',
  },
})
